<script setup>
import OImage from "../setting/Images.vue";
import { newRandomUid } from "@/utils";
import AlphaColor from "../setting/AlphaColor.vue";
import Slider from "../setting/Slider.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]),
  pageConfig = inject("pageConfig", []);

const form = ref({
  $position: { top: 0, left: 13 },
  $size: { width: 350, height: 506 },
  $positionType: "relative",
  $removeable: true,
  show: true,
  type: 1,
  bgImg: "./imagesStatic/activity/goodsGroup_bg.png",
  bgColor: "",
  textPosition: { top: 15, left: 15 },
  textSize: { width: 320, height: 476 },
  productBgShow: true,
  productBg: "./imagesStatic/activity/goodsGroup_bg2.png",
  prizeBgColor: "#ffffff",
  productPosition: { left: 10, top: 10 },
  productSize: { width: 300, height: 65 },
  productSpace: 5,
  buyBtnImg: "./imagesStatic/activity/goodsGroup_btn.png",
  buyBtnSize: { width: 57, height: 58 },
});

const formRef = ref();

const typeList = [
  { label: "一列", key: 1 },
  { label: "两列", key: 2 },
];

const rules = {
  type: [{ required: true, message: "请选择展示类型", trigger: "change" }],
};

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const initConfig = () => {
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `GoodsGroup-${newRandomUid()}`;
  }
};

const onChange = (val) => {
  detail.value = detail.value;
};

// 表单校验
const check = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, invalidFields) => {
      if (valid) {
        resolve();
      } else
        reject(
          `${props.name}校验未通过，${
            invalidFields[Object.keys(invalidFields)[0]][0].message
          }`
        );
    });
  });
};

onMounted(() => {
  nextTick(() => {
    initConfig();
    onChange();
  });
});

defineExpose({ check });
</script>
<template>
  <el-form
    ref="formRef"
    :model="detail"
    :rules="rules"
    :disabled="disabled"
    label-width="auto"
  >
    <el-form-item label="展示类型:" prop="type">
      <el-radio-group v-model="detail.type" @change="onChange">
        <el-radio v-for="item in typeList" :label="item.key">{{
          item.label
        }}</el-radio>
      </el-radio-group>
    </el-form-item>

    <Slider
      v-model="detail.productSpace"
      name="商品间距"
      :min="0"
      :max="50"
      @change="onChange"
    />
    <AlphaColor v-model="detail.bgColor" name="区域背景色" @change="onChange" />
    <AlphaColor
      v-model="detail.prizeBgColor"
      name="商品背景色"
      @change="onChange"
    />
    <OImage
      v-model="detail.bgImg"
      v-model:size="detail.$size"
      v-model:show="detail.show"
      name="区域背景图"
      @change="onChange"
    />
    <OImage
      v-model="detail.productBg"
      v-model:size="detail.productSize"
      v-model:show="detail.productBgShow"
      name="商品背景图"
      @change="onChange"
    />
    <OImage
      v-model="detail.buyBtnImg"
      v-model:size="detail.buyBtnSize"
      name="购买按钮"
      @change="onChange"
    />
  </el-form>
</template>
